<template>
  <!-- 首页音乐列表 -->
  <!-- 轮播图 -->
  <el-carousel style="height:250px;" type="card">
    <el-carousel-item v-for="item in img" :key="item" style="border-radius: 10px;">
      <img
        :src="item.url"
        style="object-fit: cover; width: 100%; height: 100%"
      />
    </el-carousel-item>
  </el-carousel>

  <!-- 音乐表格 -->
  <el-table :data="tableData" class="Table_box" @row-dblclick="onRow">
    <!-- 封面第一列 -->
    <el-table-column prop="imgAddress" label="封面" width="1" #default="one">
      <el-image class="FM_img" :src="one.row.imgAddress" />
    </el-table-column>
    <!-- 第二列 -->
    <el-table-column prop="musicTitle" width="1" label="歌名"></el-table-column>
    <!-- 第三列 -->
    <el-table-column prop="singer" label="歌手" width="1"></el-table-column>
    <!-- 第四列 -->
    <el-table-column prop="star" width="1" label="收藏" #default="scope">
      <el-icon
        :color="star_color(scope.row.star)"
        @click="Favorite(scope.row)"
        size="25px"
      >
        <Star />
      </el-icon>
    </el-table-column>
  </el-table>

</template>

<script setup>
import { Star } from "@element-plus/icons-vue";
import { reactive, ref, computed, onMounted, watch } from "vue";
import { openInfo } from "../../utils/common"; //导入消息弹窗
import musicListInfoStore from "../../stores/useMusicStore";
import musicHttp from "../../api/musicHttp";
import userMsgInfoStore from "../../stores/useUserStore";
const musicStore = musicListInfoStore();
const userStore = userMsgInfoStore();

//数据 {musicId:null,musicTitle:"",singer:'',imgAddress:"",star:false,}
const tableData = reactive([]);

onMounted(() => {
  //进入页面时根据用户的id获取-全部歌曲数据
  homeMusicList(userStore.userId, musicStore.search);
});

//首页列表/模糊查询
function homeMusicList(userId, musicTitle) {
  musicHttp.getHomeMusicList(userId, musicTitle).then((res) => {
    tableData.splice(0, tableData.length); //清空数组
    const array = res.data;
    tableData.push(...array);
  });
}

//双击某一行 播放该音乐-rowdata是该行的数据对象{id,title,singer,ing,star}
function onRow(rowdata) {
  musicStore.nowMusicId = rowdata.musicId; //将id修改
}

//根据用户id音乐id收藏音乐
function addFavorite(id, musicId) {
  musicHttp.addFavorite(id, musicId).then((res) => {
    openInfo("",res.msg);
  });
}

//根据用户id音乐id取消收藏音乐
function removeFavorite(id, musicId) {
  musicHttp.removeFavorite(id, musicId).then((res) => {
    openInfo("",res.msg);
  });
}

//收藏与取消收藏
function Favorite(rowdata) {
  if (rowdata.star == false) {
    //如果状态是没有收藏则收藏并且修改状态为收藏
    addFavorite(userStore.userId, rowdata.musicId);
    rowdata.star = true;
  } else if (rowdata.star == true) {
    //如果状态是收藏则取消收藏并且修改状态为未收藏
    removeFavorite(userStore.userId, rowdata.musicId);
    rowdata.star = false;
  }
}

/* 搜索 */
const SE = computed(() => {
  return musicStore.search;
});

watch(SE, () => {
  if (SE.value != "") {
    homeMusicList(userStore.userId, musicStore.search);
  } else {
    homeMusicList(userStore.userId, musicStore.search);
  }
});

function star_color(star) {
  //收藏颜色
  if (star) {
    return "aquamarine";
  } else {
    return "";
  }
}

//轮播图
const img = reactive([
  {url: "/src/assets/lbt/年年.jpg"},
  {url: "/src/assets/lbt/小宇宙.jpg"},
  {url: "/src/assets/lbt/悬溺.jpg"},
  {url: "/src/assets/lbt/无问.jpg"}]);
  
</script>

<style scoped >
/* 音乐表格 */
.Table_box {
  width: 100%;
  margin-top: 20px;
  height: 50vh
}

.Table_box >>> .el-scrollbar__view,
.Table_box >>> .el-table__header,
.Table_box >>> .el-table__body {
  width: 100% !important;
}

/* 封面图片 */
.FM_img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>